<template>
    <div class="manage-wrap">

        <div class="main-wrap">
            <!-- Nav -->
            <div class="nav-wrap cf">
                <ul class="fl nav-box shadow no-select">
                    <li @click="pageHref('/')">首页</li>
                </ul>
            </div>
            <!-- type -->
            <ul class="type-wrap">
                <li class="no-select" :class="'engine'==type.text ? 'active shadow' : ''" @click="typeChange('engine')">
                    <img class="type-img" src="/src/assets/imgs/icon-engine.svg" alt="引擎"/>
                    <div class="type-title">引擎</div>
                </li>
                <li class="no-select" :class="'bookmark'==type.text ? 'active shadow' : ''"
                    @click="typeChange('bookmark')">
                    <img class="type-img" src="/src/assets/imgs/icon-bookmark.svg" alt="书签"/>
                    <div class="type-title">书签</div>
                </li>
            </ul>
            <!-- engine -->
            <div class="engine-wrap" v-if="type.text=='engine'">
                <div class="app-card">
                    <div class="app-card-header">
                        <span>引擎</span>
                        <a-tooltip>
                            <template v-slot:title>新增引擎</template>
                            <a-button
                                    class="header-setting"
                                    type="dashed"
                                    shape="circle"
                                    size="small"
                                    @click="openEngineModal"
                            >+
                            </a-button>
                        </a-tooltip>
                    </div>
                    <div class="app-card-body">
                        <ul class="engine-box" @dragstart="onDragEngineStart" @dragover="onDragOver"
                            @dragend="onDragEnd('engine')" ref="engine" v-if="engine.list.length">
                            <li class="item text-elip" draggable="true" v-for="(item,index) in engine.list" :key="index"
                                :data-id="item.id">
                                <img class="engine-img" :src="item.icon" alt="">
                                {{item.title}}
                                <span class="fr text-gray padding-left"
                                      @click.stop="showEditEngineModal(index)">编辑</span>
                                <a-popconfirm title="确认操作?" ok-text="是" cancel-text="否" @confirm="delEngineOk(item.id)">
                                    <span class="fr text-red">删除</span>
                                </a-popconfirm>
                                <!--<span class="website-url">{{item.url}}</span>-->
                            </li>
                        </ul>
                        <div class="text-center" v-else>暂无数据</div>
                    </div>
                </div>
            </div>
            <!-- bookmark -->
            <div class="bookmark-wrap app-row app-col-space10" v-else-if="type.text=='bookmark'">
                <div class="menu-wrap app-col-xs12 app-col-sm5">
                    <div class="app-card">
                        <div class="app-card-header">
                            <span>分类</span>
                            <a-tooltip>
                                <template v-slot:title>新增分类</template>
                                <a-button
                                        class="header-setting"
                                        type="dashed"
                                        shape="circle"
                                        size="small"
                                        @click="openMenuModal"
                                >+
                                </a-button>
                            </a-tooltip>
                        </div>
                        <div class="app-card-body">
                            <ul class="menu-box" @dragstart="onDragNavStart" @dragover="onDragOver"
                                @dragend="onDragEnd('nav')" ref="nav" v-if="nav.list.length">
                                <li class="item text-elip" :class="index==nav.idx ? 'active' : ''" draggable="true"
                                    v-for="(item,index) in nav.list" :key="index" :data-id="item.id"
                                    @click="navChange(index)">
                                    <img class="menu-img" src="/src/assets/imgs/ctg.png" alt="">
                                    {{item.title}}
                                    <span class="fr text-gray padding-left"
                                          @click.stop="showEditMenuModal(index)">编辑</span>
                                    <a-popconfirm title="该操作会删除分类下的所有书签,是否确认?" ok-text="是" cancel-text="否"
                                                  @confirm="delMenuOk(item.id)">
                                        <span class="fr text-red padding-left">删除</span>
                                    </a-popconfirm>
                                    <span class="menu-count" v-if="item.webCount">{{item.webCount}}</span>
                                </li>
                            </ul>
                            <div class="text-center" v-else>暂无数据</div>
                        </div>
                    </div>
                </div>
                <div class="website-wrap app-col-xs12 app-col-sm7">
                    <div class="app-card">
                        <div class="app-card-header">
                            <span>书签</span>
                            <div class="header-setting">
                                <a-button-group>
                                    <a-tooltip>
                                        <template v-slot:title>正常模式</template>
                                        <a-button
                                                :type="mode=='normal' ? 'primary' : 'default'"
                                                shape="circle"
                                                size="small"
                                                @click="changeMode('normal')"
                                                v-if="bookmark.list.length"
                                        >●
                                        </a-button>
                                    </a-tooltip>
                                    <a-tooltip>
                                        <template v-slot:title>移动模式 (选中需要移动的书签,再点击分类即可移动选中的书签)</template>
                                        <a-button
                                                :type="mode=='move' ? 'primary' : 'default'"
                                                shape="circle"
                                                size="small"
                                                @click="changeMode('move')"
                                                v-if="bookmark.list.length"
                                        >⊙
                                        </a-button>
                                    </a-tooltip>
                                </a-button-group>
                                <a-tooltip>
                                    <template v-slot:title>新增书签</template>
                                    <a-button
                                            class="bookmark-add"
                                            type="dashed"
                                            shape="circle"
                                            size="small"
                                            @click="openBookmarkModal"
                                            v-if="nav.list.length"
                                    >+
                                    </a-button>
                                </a-tooltip>
                            </div>
                        </div>
                        <div class="app-card-body" v-if="mode == 'normal'">
                            <ul class="website-box" @dragstart="onDragBookmarkStart" @dragover="onDragOver"
                                @dragend="onDragEnd('bookmark')" ref="bookmark" v-if="bookmark.list.length">
                                <li class="item text-elip" draggable="true" v-for="(item,index) in bookmark.list"
                                    :key="index" :data-id="item.id" :title="item.title">
                                    <img class="website-img" :src="item.icon" alt="">
                                    {{item.title}}
                                    <span class="fr text-gray padding-left" @click.stop="showEditBookmarkModal(index)">编辑</span>
                                    <a-popconfirm title="确认操作?" ok-text="是" cancel-text="否"
                                                  @confirm="delBookmarkOk(item.id)">
                                        <span class="fr text-red padding-left">删除</span>
                                    </a-popconfirm>
                                    <span class="fr text-blue" @click.stop="href(item)">前往</span>
                                    <!--<span class="website-url">{{item.url}}</span>-->
                                </li>
                            </ul>
                            <div class="text-center" v-else>暂无数据</div>
                        </div>
                        <div class="app-card-body" v-else-if="mode == 'move'">
                            <a-checkbox-group v-model:value="bookmark.select">
                                <ul class="website-box">
                                    <li class="item text-elip" draggable="true" v-for="(item,index) in bookmark.list"
                                        :key="index" :data-id="item.id">
                                        <img class="website-img" :src="item.icon" alt="">
                                        <a-checkbox :value="item.id" name="type">{{item.title}}</a-checkbox>
                                    </li>
                                </ul>
                            </a-checkbox-group>
                        </div>
                    </div>
                    <!--<div class="website-title">书签</div>-->
                </div>
            </div>
        </div>

        <!-- 引擎 -->
        <a-modal title="新增" v-model:visible="engine.state" @ok="engineOk">
            <a-form layout="vertical">
                <a-form-item :label="'搜索引擎链接 如:' + website.defaultEngine">
                    <a-input v-model:value="engine.form.url" placeholder="请输入搜索引擎链接"/>
                </a-form-item>
                <a-form-item label="引擎标题">
                    <a-input v-model:value="engine.form.title" placeholder="请输入引擎标题"/>
                </a-form-item>
            </a-form>
        </a-modal>
        <a-modal title="编辑" v-model:visible="engine.editState" @ok="editEngineOk">
            <a-form layout="vertical">
                <a-form-item :label="'搜索引擎链接 如:' + website.defaultEngine">
                    <a-input v-model:value="engine.editForm.url" placeholder="请输入搜索引擎链接"/>
                </a-form-item>
                <a-form-item label="引擎标题">
                    <a-input v-model:value="engine.editForm.title" placeholder="请输入引擎标题"/>
                </a-form-item>
            </a-form>
        </a-modal>

        <!-- 分类 -->
        <a-modal title="新增" v-model:visible="nav.state" @ok="menuOk">
            <a-form layout="vertical">
                <a-form-item label="分类名称">
                    <a-input v-model:value="nav.form.title" placeholder="请输入分类名称"/>
                </a-form-item>
            </a-form>
        </a-modal>
        <a-modal title="编辑" v-model:visible="nav.editState" @ok="editMenuOk">
            <a-form layout="vertical">
                <a-form-item label="分类名称">
                    <a-input v-model:value="nav.editForm.title" placeholder="请输入分类名称"/>
                </a-form-item>
            </a-form>
        </a-modal>

        <!-- 书签 -->
        <a-modal title="新增" v-model:visible="bookmark.state" @ok="bookmarkOk">
            <a-form layout="vertical">
                <a-form-item label="网站链接">
                    <a-input v-model:value="bookmark.form.url" placeholder="请输入网站链接"/>
                </a-form-item>
                <a-form-item label="网站标题">
                    <a-input v-model:value="bookmark.form.title" placeholder="请输入网站标题"/>
                </a-form-item>
            </a-form>
        </a-modal>
        <a-modal title="编辑" v-model:visible="bookmark.editState" @ok="editBookmarkOk">
            <a-form layout="vertical">
                <a-form-item label="网站链接">
                    <a-input v-model:value="bookmark.editForm.url" placeholder="请输入网站链接"/>
                </a-form-item>
                <a-form-item label="网站标题">
                    <a-input v-model:value="bookmark.editForm.title" placeholder="请输入网站标题"/>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
    import website from '/src/config/website';
    import {openPage, clearStorage, goUrl} from '/src/util/index';
    import {
        bookmark,
        orderEngine,
        orderMenu,
        orderBookmark,
        moveBookmarkByMenu,
        addMenu,
        addBookmark,
        editMenu,
        editBookmark,
        delEngine,
        delMenu,
        delBookmark,
        engine,
        addEngine,
        editEngine
    } from '/src/request/api/nav';

    import Nav from '/src/components/skin/default/Nav.vue';

    export default {
        name: "manage",
        components: {
            Nav
        },
        data() {
            return {
                website: website,
                mode: 'normal', // 模式 normal:正常/move:移动

                // 类型
                type: {
                    // list: [
                    //     {title: '引擎', icon: 'icon-engine.svg'},
                    //     {title: '书签', icon: 'icon-bookmark.svg'},
                    // ],
                    text: 'engine',
                },
                // 搜索引擎
                engine: {
                    list: [],
                    idx: 0,
                    row: null,
                    state: false,
                    form: {
                        url: '',
                        title: '',
                    },

                    editState: false,
                    editForm: {
                        id: '',
                        url: '',
                        title: '',
                    }
                },
                // 分类
                nav: {
                    list: [],
                    idx: 0,
                    state: false,
                    form: {
                        title: '',
                    },

                    // 编辑
                    editState: false,
                    editForm: {
                        id: '',
                        title: '',
                    },
                },
                // 书签
                bookmark: {
                    list: [],
                    state: false,
                    form: {
                        url: '',
                        title: '',
                    },
                    select: [], // 选中书签

                    // 编辑
                    editState: false,   // 确认移动书签弹框状态
                    editForm: {
                        id: '',
                        url: '',
                        title: '',
                    },
                },

                // 被拖拽的对象
                draging: null,
                // 目标对象
                target: null,
                // ref
                ref: null,
            }
        },
        created() {
            this.getEngine();
            this.getBookmark();
        },
        mounted() {
            // 为了防止火狐浏览器拖拽的时候以新标签打开
            document.body.ondrop = function (event) {
                event.preventDefault();
                event.stopPropagation();
            }
        },
        methods: {
            // engine
            getEngine(tag = false) {
                let that = this,
                    arr = localStorage.getItem(website.engine);
                if (arr && JSON.parse(arr) && JSON.parse(arr).length && tag == false) {
                    arr = JSON.parse(arr);
                    that.engine.list = arr;
                    if (arr.length) {
                        that.engine.row = arr[0];
                    }
                } else {
                    engine().then(res => {
                        let list = res.list,
                            arr = [];
                        list.forEach((item, idx) => {
                            arr.push({
                                id: item.id,
                                title: item.title,
                                url: item.url,
                                icon: item.icon,
                            });
                            if (idx == 0) {
                                that.engine.row = item;
                            }
                        });
                        localStorage.setItem(website.engine, JSON.stringify(arr));
                        that.engine.list = arr;
                    }).catch(err => {

                    })
                }
            },
            // bookmark
            getBookmark(tag = false, idx = 0) {
                let that = this,
                    arr = localStorage.getItem(website.bookmark);
                if (arr && JSON.parse(arr) && JSON.parse(arr).length && tag == false) {
                    arr = JSON.parse(arr);
                    that.nav.list = arr;
                    if (arr.length) {
                        that.bookmark.list = arr[idx].website;
                    }
                } else {
                    bookmark().then(res => {
                        let list = res.list,
                            arr = [];
                        list.forEach((item, index) => {
                            let website = item.website;
                            arr.push({
                                title: item.title,
                                id: item.id,
                                website: website,
                                webCount: website.length,
                            });
                            if (index == idx && website.length) {
                                that.bookmark.list = website;
                            }
                        });
                        localStorage.setItem(website.bookmark, JSON.stringify(arr));
                        that.nav.list = arr;
                    }).catch(err => {
                        console.log(err);
                    })
                }
                that.nav.idx = idx;
            },
            // typeChange
            typeChange(text) {
                let that = this;
                that.type.text = text;
            },
            // navChange
            navChange(index = 0) {
                let that = this,
                    mode = that.mode,
                    list = that.nav.list,
                    row = list[index],
                    bookmark = row.website,
                    select = that.bookmark.select;

                // 正常模式
                if (mode == 'normal') {
                    that.nav.idx = index;
                    that.bookmark.list = bookmark;
                }
                // 移动模式
                else if (mode == 'move') {
                    if (select.length) {
                        let data = {
                            uwids: JSON.stringify(select),
                            mid: row.id,
                        };
                        moveBookmarkByMenu(data).then(res => {
                            that.$message.success(res.msg || website.msg.success);
                            that.nav.idx = index;
                            that.bookmark.select = [];
                            that.getBookmark(true, index);
                        }).catch(err => {
                            that.$message.error(err.msg || website.msg.error);
                        })
                    } else {
                        that.$message.warning('请先选择书签后再变更分类');
                    }
                }
            },
            // settingChange
            settingChange(text) {
                let that = this;
                that.setting.text = text;
            },
            // 页面切换
            pageHref(url) {
                goUrl(url);
            },
            // href
            href(obj) {
                openPage(obj.url, 'bookmark');
            },
            // 拖动
            onDragEngineStart(event) {
                console.log("drag start");
                this.draging = event.target;
                this.ref = 'engine';
            },
            onDragNavStart(event) {
                console.log("drag start");
                this.draging = event.target;
                this.ref = 'nav';
            },
            onDragBookmarkStart(event) {
                console.log("drag start");
                this.draging = event.target;
                this.ref = 'bookmark';
            },
            onDragOver(event) {
                console.log('drag move');
                this.target = event.target;
                let targetTop = event.target.getBoundingClientRect().top;
                let dragingTop = this.draging.getBoundingClientRect().top;
                if (this.target.nodeName === "LI" && this.target !== this.draging) {
                    if (this.target) {
                        if (this.target.animated) {
                            return;
                        }
                    }
                    if (this._index(this.draging) < this._index(this.target)) {
                        this.target.parentNode.insertBefore(this.draging, this.target.nextSibling);
                    } else {
                        this.target.parentNode.insertBefore(this.draging, this.target);
                    }
                    this._anim(targetTop, this.target);
                    this._anim(dragingTop, this.draging);
                }
            },
            onDragEnd(type) {
                console.log('drag end');
                let that = this,
                    currentNodes = Array.from(that.getChildNodes());

                let data = currentNodes.map((i, index) => {
                    let ref = that.ref,
                        list = [];
                    // engine
                    if (ref == 'engine') {
                        list = that.engine.list;
                    }
                    // nav
                    else if (ref == 'nav') {
                        list = that.nav.list;
                    }
                    // bookmark
                    else if (ref == 'bookmark') {
                        list = that.bookmark.list;
                    } else {
                        that.$message.error('ref error');
                    }
                    let item = list.find(c => c.id == (i && i.dataset && i.dataset.id ? i.dataset.id : ''));
                    if (item) {
                        return item.id;
                    }
                });
                // 搜索引擎排序
                if (type == 'engine') {
                    orderEngine({
                        order: JSON.stringify(data),
                    }).then(res => {
                        that.$message.success(res.msg || website.msg.success);
                        clearStorage();
                        //window.location.reload();
                    }).catch(err => {
                        that.$message.error(err.msg || website.msg.error);
                    })
                }
                // 分类排序
                else if (type == 'nav') {
                    orderMenu({
                        order: JSON.stringify(data),
                    }).then(res => {
                        that.$message.success(res.msg || website.msg.success);
                        clearStorage();
                        //window.location.reload();
                    }).catch(err => {
                        that.$message.error(err.msg || website.msg.error);
                    })
                }
                // 书签排序
                else if (type == 'bookmark') {
                    orderBookmark({
                        order: JSON.stringify(data),
                    }).then(res => {
                        that.$message.success(res.msg || website.msg.success);
                        clearStorage();
                        //window.location.reload();
                    }).catch(err => {
                        that.$message.error(err.msg || website.msg.error);
                    })
                }
            },
            _anim(startPos, dom) {
                let offset = startPos - dom.getBoundingClientRect().top;
                dom.style.transition = "none";
                dom.style.transform = `translateY(${offset}px)`;
                //触发重绘
                dom.offsetWidth;
                dom.style.transition = "transform .3s";
                dom.style.transform = ``;
                clearTimeout(dom.animated);

                dom.animated = setTimeout(() => {
                    dom.style.transition = "";
                    dom.style.transform = ``;
                    dom.animated = false;
                }, 300)
            },
            _index(el) {
                let domData = Array.from(this.getChildNodes());
                return domData.findIndex(i => i.innerText == el.innerText);
            },
            getChildNodes(ref = this.ref) {
                return this.$refs[ref].childNodes;
            },

            // openEngineModal
            openEngineModal() {
                this.engine.state = true;
            },
            // openMenuModal
            openMenuModal() {
                this.nav.state = true;
            },
            // openBookmarkModal
            openBookmarkModal() {
                this.bookmark.state = true;
            },
            // engineOk
            engineOk() {
                let that = this,
                    form = that.engine.form,
                    data = {
                        url: form.url,
                        title: form.title,
                    };
                if (!data.url) {
                    that.$message.warning('缺少必要参数: url');
                    return false;
                }
                if (!data.title) {
                    that.$message.warning('缺少必要参数: title');
                    return false;
                }
                addEngine(data).then(res => {
                    that.$message.success(res.msg || website.msg.success);
                    that.engine.state = false;
                    that.getEngine(true);
                }).catch(err => {
                    that.$message.error(err.msg || website.msg.error);
                })
            },
            // menuOk
            menuOk() {
                let that = this,
                    form = that.nav.form;
                if (!form.title) {
                    that.$message.warning('缺少必要参数: title');
                    return false;
                }
                //form.key = website.key;
                addMenu({
                    //key: website.key,
                    title: form.title,
                }).then(res => {
                    that.$message.success(res.msg || website.msg.success);
                    that.nav.state = false;
                    that.getBookmark(true);
                }).catch(err => {
                    that.$message.error(err.msg || website.msg.error);
                })
            },
            // bookmarkOk
            bookmarkOk() {
                let that = this,
                    form = that.bookmark.form,
                    list = that.nav.list,
                    idx = that.nav.idx,
                    row = list[idx],
                    data = {
                        //key: website.key,
                        mid: row.id,
                        url: form.url,
                        title: form.title,
                    };
                if (!data.mid) {
                    that.$message.warning('缺少必要参数: mid');
                    return false;
                }
                if (!data.url) {
                    that.$message.warning('缺少必要参数: url');
                    return false;
                }
                if (!data.title) {
                    that.$message.warning('缺少必要参数: title');
                    return false;
                }
                addBookmark(data).then(res => {
                    that.$message.success(res.msg || website.msg.success);
                    that.bookmark.state = false;
                    that.getBookmark(true, idx);
                }).catch(err => {
                    that.$message.error(err.msg || website.msg.error);
                })
            },
            // changeMode
            changeMode(type) {
                let that = this,
                    mode = that.mode;
                that.mode = type;
                // 正常模式
                if (mode == 'normal') {

                }
                // 移动模式
                else if (mode == 'move') {
                    that.bookmark.select = [];
                }
                // 编辑模式
                else if (mode == 'edit') {

                }
            },
            // showEditEngineModal
            showEditEngineModal(index) {
                let that = this,
                    list = that.engine.list,
                    row = list[index],
                    form = {
                        id: row.id,
                        title: row.title,
                        url: row.url,
                    };
                that.engine.editForm = form;
                this.engine.editState = true;
            },
            // showEditWebsiteModal
            showEditMenuModal(index) {
                let that = this,
                    list = that.nav.list,
                    row = list[index],
                    form = {
                        //key: website.key,
                        id: row.id,
                        title: row.title,
                    };
                that.nav.editForm = form;
                this.nav.editState = true;
            },
            // showEditBookmarkModal
            showEditBookmarkModal(index) {
                let that = this,
                    list = that.bookmark.list,
                    row = list[index],
                    form = {
                        //key: website.key,
                        id: row.id,
                        url: row.url,
                        title: row.title,
                    };
                that.bookmark.editForm = form;
                this.bookmark.editState = true;
            },
            // editEngineOk
            editEngineOk() {
                let that = this,
                    form = that.engine.editForm;
                editEngine(form).then(res => {
                    that.$message.success(res.msg || website.msg.success);
                    that.engine.editState = false;
                    that.getEngine(true);
                }).catch(err => {
                    that.$message.error(err.msg || website.msg.error);
                })
            },
            // editMenuOk
            editMenuOk() {
                let that = this,
                    idx = that.nav.idx,
                    form = that.nav.editForm;
                editMenu(form).then(res => {
                    that.$message.success(res.msg || website.msg.success);
                    that.nav.editState = false;
                    that.getBookmark(true, idx);
                }).catch(err => {
                    that.$message.error(err.msg || website.msg.error);
                })
            },
            // editBookmarkOk
            editBookmarkOk() {
                let that = this,
                    idx = that.nav.idx,
                    form = that.bookmark.editForm;
                editBookmark(form).then(res => {
                    that.$message.success(res.msg || website.msg.success);
                    that.bookmark.editState = false;
                    that.getBookmark(true, idx);
                }).catch(err => {
                    that.$message.error(err.msg || website.msg.error);
                })
            },
            // delEngineOk
            delEngineOk(id) {
                let that = this;
                delEngine({
                    id: id,
                }).then(res => {
                    that.$message.success(res.msg || website.msg.success);
                    that.nav.editState = false;
                    that.getEngine(true);
                }).catch(err => {
                    that.$message.error(err.msg || website.msg.error);
                })
            },
            // delMenuOk
            delMenuOk(id) {
                let that = this;
                delMenu({
                    id: id,
                }).then(res => {
                    that.$message.success(res.msg || website.msg.success);
                    that.nav.editState = false;
                    that.getBookmark(true);
                }).catch(err => {
                    that.$message.error(err.msg || website.msg.error);
                })
            },
            // delBookmarkOk
            delBookmarkOk(id) {
                let that = this,
                    idx = that.nav.idx;
                delBookmark({
                    id: id,
                }).then(res => {
                    that.$message.success(res.msg || website.msg.success);
                    that.nav.editState = false;
                    that.getBookmark(true, idx);
                }).catch(err => {
                    that.$message.error(err.msg || website.msg.error);
                })
            },
        },
        watch: {
            // token 变化
            '$store.state.token'(val) {
                let that = this;
                if (val == '') {
                    that.$message.warning('登录失效,返回首页');
                    that.$router.push('/');
                } else {
                    that.getEngine(true);
                    that.getBookmark(true);
                }
            },
        },
    }
</script>

<style lang="less" scoped>
    @width: 1000px;
    @height: 20px;
    @radius: 4px;
    @itemHeight: 20px;

    .manage-wrap {
        width: 100vw;
        min-height: 100vh;

        .main-wrap {
            width: @width;
            margin: 0 auto;

            .nav-wrap {
                padding-top: 20px;

                .nav-box {
                    border-radius: 100px;
                    padding: 0 10px;
                    font-size: 0;
                    min-width: 60px;
                    background-color: white;

                    li {
                        display: inline-block;
                        font-size: 14px;
                        min-width: 40px;
                        height: 20px;
                        line-height: 20px;
                        margin: 8px 0;
                        padding: 0 10px;
                        text-align: center;
                        cursor: pointer;
                        /*border-right: 1px solid #d3d3d3;*/
                        position: relative;
                        color: #333;

                        &:hover, &.active {
                            color: #1E9FFF;
                        }

                        &:after {
                            content: '';
                            border: 1px solid #d3d3d3;
                            position: absolute;
                            right: 0;
                            top: 5px;
                            height: 10px;

                        }

                        &:last-child:after {
                            content: none;
                        }
                    }
                }
            }

            .type-wrap {
                padding: 10px 0 0 0;
                margin: 0;
                text-align: center;

                li {
                    display: inline-block;
                    margin-bottom: 10px;
                    width: 80px;
                    height: 80px;
                    padding: 10px;
                    border-radius: @radius;
                    cursor: pointer;
                    margin-right: 10px;

                    &.active {
                        background: white;
                    }

                    &:last-child {
                        margin-right: 0;
                    }

                    .type-img {
                        width: 40px;
                        height: 40px;
                    }

                    .type-title {
                        height: 15px;
                        line-height: 15px;
                        margin-top: 5px;
                    }
                }


            }
        }
    }

    .engine-wrap {
        .engine-title {
            height: 30px;
            font-size: 16px;
        }

        .engine-box {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            overflow-y: auto;

            .engine-img {
                position: relative;
                width: @height;
                height: @height;
                display: block;
                float: left;
                margin-right: 5px;

                &:after {
                    content: '';
                    display: block;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    z-index: 2;
                    top: 0;
                    left: 0;
                    background: url('/src/assets/imgs/network.png') white;
                    background-size: 100%;
                }
            }

            .engine-count {
                display: inline-block;
                float: right;
                border-radius: @radius;
                color: #959595;
                padding: 0 5px;
                font-size: 12px;
            }
        }
    }

    .menu-wrap {
        display: inline-block;

        .menu-title {
            height: 30px;
            font-size: 16px;
        }

        .menu-box {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            overflow-y: auto;

            .menu-img {
                position: relative;
                width: @height;
                height: @height;
                display: block;
                float: left;
                margin-right: 5px;

                &:after {
                    content: '';
                    display: block;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    z-index: 2;
                    top: 0;
                    left: 0;
                    background: url('/src/assets/imgs/network.png') white;
                    background-size: 100%;
                }
            }

            .menu-count {
                display: inline-block;
                float: right;
                border-radius: @radius;
                color: #959595;
                padding: 0 5px;
                font-size: 12px;
            }

            .active {
                background-color: #d4d4d4;
            }
        }
    }

    .website-wrap {
        display: inline-block;

        .website-title {
            height: 30px;
            font-size: 16px;
        }

        .bookmark-add {
            margin-left: 10px !important;
        }

        .website-box {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            overflow-y: auto;

            .website-img {
                position: relative;
                width: @height;
                height: @height;
                display: block;
                float: left;
                margin-right: 5px;

                &:after {
                    content: '';
                    display: block;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    z-index: 2;
                    top: 0;
                    left: 0;
                    background: url('/src/assets/imgs/network.png') white;
                    background-size: 100%;
                }
            }

            .website-url {
                display: inline-block;
                color: #888888;
                font-size: 10px;
                margin-left: 10px;
            }
        }

        .ant-checkbox-group {
            width: 100% !important;

            .ant-checkbox-wrapper {
                color: black;
                display: block;
                height: @itemHeight;
                line-height: @itemHeight;
                overflow: hidden !important;

                span:last-child {
                    display: inline-block;
                    line-height: @itemHeight;
                }
            }
        }
    }

    .setting-wrap {
        .setting-nav {
            padding: 20px;

            .setting-items {
                cursor: pointer;
                padding: 10px;

                img {
                    width: @height;
                    height: @height;
                    margin-right: 10px;
                }

                &.active {
                    background-color: #efefef;
                    border-radius: @radius;
                }
            }
        }

        .setting-content {
            padding: 20px;
            min-height: 400px;
        }
    }

    ul {
        list-style: none;
    }

    .item {
        font-size: 14px;
        line-height: @height;
        cursor: pointer;
        min-height: @height;
        color: black;
        border: 1px solid #d4d4d4;
        border-radius: @radius;
        margin-top: 5px;
        padding: 6px 8px;
        text-align: left;

        &:first-child {
            margin: 0;
        }
    }

    @media screen and (max-width: @width + 40) {
        .manage-wrap .main-wrap {
            width: auto;
            overflow: hidden;
            margin: 0;
            padding: 0 20px 20px 20px;
        }
    }
</style>